<template>
	<view class="mdication">
		<view class="mdication_nav">
			<text class="mdication_item" v-for="(item,index) in mdicationNavList" :key="index" @click="changeNavIndex(item,index)"
			 :class="currentNav == index? 'current_nav':''">{{item}}</text>
		</view>
		<scroll-view scroll-y class="mdication_list">
			<!-- 今日服药 -->
			<view>
				<view class="mdication_item" v-for="(item,index) in mdicationList" :key='index' v-show="currentNav == 0">
					<view class="item_top">
						<text>服药时间</text>
						<text>{{item.time}}</text>
					</view>
					<view class="item_con">

						<image :src="baseUrl + item.drug.drug_img" mode="" v-if="item.drug.drug_img"></image>
						<view v-else class="con_noimg">{{item.drug.drug_name | drugNameOneStr}}</view>
						<text class="con_one">{{item.drug.drug_name}}</text>
						<text class="con_tow"><text style="color: #01cb9b; margin-right: 20rpx;">{{item.drug.drug_num}}</text> 片</text>
					</view>
					<view class="item_foo">
						<text :class="currentItemFoo == 0? 'current_item_foo' : ''" @click="changeCurr(item.id,0)">完成服药</text>
						<text :class="currentItemFoo == 1? 'current_item_foo' : ''" @click="changeCurr(item.id,1)">放弃服药</text>
					</view>
				</view>
				<!-- 暂无药品 -->
				<view class="no_drugs" v-show="noDugsrList[0]">
					<image class="no_drugs_img" src="https://xcx.shuizhisu.com/public/static/img/nav/yaowu.png" mode=""></image>
					<text>{{noDrugsText}}</text>
				</view>
			</view>


			<!-- 服药计划 -->
			<view>
				<!-- 		<view class="drug_lists" v-if="currentNav == 1" v-for="(item,index) in drugLists" :key="index">
					<image v-if="item.drug_img" class="drug_fl" :src="baseUrl + item.drug_img" mode=""></image> 
					<view v-else class="drug_fl_nodata">{{item.drug_name.substr(0,1)}}</view>
					<view class="drug_con"> 
					 <text>{{item.drug_name}}</text>
					 <text>{{item.drug_num}} {{item.drug_unit | unitType}}/次</text>
					 <text>一日{{item.everyDay}}次 | {{item.desc}}</text>
					 </view> 
					<view class="drug_fr">
						<text>剩余{{item.surplus}}日</text>
					</view>
				</view> -->

				<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in drugLists" :key="index" @click="deleteDrug(item)"
				 @open="open" :options="options" :btn-width="btnWidth" >
					<view class="drug_lists">
						<image v-if="item.drug_img" class="drug_fl" :src="baseUrl + item.drug_img" mode=""></image>
						<view v-else class="drug_fl_nodata">{{item.drug_name.substr(0,1)}}</view>
						<view class="drug_con">
							<text>{{item.drug_name}}</text>
							<text>{{item.drug_num}} {{item.drug_unit | unitType}}/次</text>
							<text>一日{{item.everyDay}}次 | {{item.desc}}</text>
						</view>
						<view class="drug_fr">
							<text>剩余{{item.surplus}}日</text>
						</view>
					</view>
				</u-swipe-action>

				<!-- 暂无药品 -->
				<view class="no_drugs" v-show="noDugsrList[1]">
					<image class="no_drugs_img" src="https://xcx.shuizhisu.com/public/static/img/nav/yaowu.png" mode=""></image>
					<text>{{noDrugsText}}</text>
				</view>
			</view>
			<!-- 服药历史 -->
			<view>
				<view class="drug_history" v-show="currentNav == 2" v-for="(history,index) in drugHistoryList" :key="index">

					<text class="his_time">{{history.time}}</text>
					<view class="history_item" v-for="v in history.child">
						<text class="his_fl">{{v.time}}</text>
						<view class="his_fl_con">
							<image v-if="v.drug.drug_img" class="his_con_img" :src="baseUrl + v.drug.drug_img" mode=""></image>
							<view v-else class="his_fl_nodata">{{v.drug.drug_name.substr(0,1)}}</view>
							<view>
								<text>{{v.drug.drug_name}}</text><br>
								<text style="color: #9f9f9f; font-size: 24rpx;"> {{v.drug.drug_num}} 片</text>
							</view>
						</view>
						<text class="his_fr" :style="{color: (v.is_finish == '服用'? '#04c99b':'')}">{{v.is_finish}}</text>
					</view>
				</view>
				<!-- 暂无药品 -->
				<view class="no_drugs" v-if="noDugsrList[2]">
					<image class="no_drugs_img" src="https://xcx.shuizhisu.com/public/static/img/nav/yaowu.png" mode=""></image>
					<text>{{noDrugsText}}</text>
				</view>
			</view>
		</scroll-view>


		<view @click="goToAddMdication">
			<AddInfo />
		</view>
	</view>
</template>

<script>
	import AddInfo from '../compon/addinfo.vue'
	export default {
		components: {
			AddInfo
		},
		data() {
			return {
				// 图片地址前缀
				baseUrl: 'http://xcx.shuizhisu.com/',
				mdicationNavList: ['今日', '服药计划', '服药历史'],
				currentNav: 0,
				currentItemFoo: 0,
				mdicationList: [],
				drugHistoryList: [],
				drugLists: [],
				// 暂无数据的展示规则
				noDugsrList: [],
				// 没有数据提示文字
				noDrugsText: '您今日没有服药提醒',
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
						color: '#fff'
					}
				}]
			};
		},
		onShow() {
			this.drugToday()
		},
		methods: {
			changeNavIndex(item, index) {
				this.currentNav = index
				switch (item) {
					case '今日':
						this.mdicationList = []
						this.drugHistoryList = []
						this.drugLists = []
						this.noDrugsText = '您今日没有服药提醒'
						this.drugToday();
						break;
					case '服药计划':
						this.mdicationList = []
						this.drugHistoryList = []
						this.drugLists = []
						this.noDrugsText = '您还没有服药计划'
						this.getDrugLists();
						break;
					case '服药历史':
						this.mdicationList = []
						this.drugHistoryList = []
						this.drugLists = []
						this.noDrugsText = '暂无服药历史'
						this.getDrugHistory();
						break;
				}
			},
			changeCurr(id, index) {

				if (index) {
					this.drugGiveup(id)
				} else {
					this.drugFinished(id)
				}
				// this.currentItemFoo = index 
			},
			// 今日服药
			drugToday() {
				this.$api.sendRequest({
					url: '/api/drug/today',
					success: res => {
						if (res.code >= 0) {
							this.mdicationList = res.data.data
							if (res.data.data.length) {
								this.noDugsrList = []
							} else {
								this.noDugsrList[0] = true
							}
						}
					}
				})
			},
			// 完成服药
			drugFinished(id) {
				this.$api.sendRequest({
					url: '/api/drug/finished',
					data: {
						id
					},
					success: res => {
						if (res.code >= 0) {
							this.drugToday()
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
						}
					}
				})
			},
			// 放弃服药
			drugGiveup(id) {
				this.$api.sendRequest({
					url: '/api/drug/giveup',
					data: {
						id
					},
					success: res => {
						if (res.code >= 0) {
							this.drugToday()
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
						}
					}
				})
			},
			// 服药历史
			getDrugHistory() {
				this.$api.sendRequest({
					url: '/api/drug/history',
					data: {},
					success: res => {
						if (res.code >= 0) {
							if (JSON.stringify(res.data.data) == "{}") {
								this.noDugsrList[2] = true
							} else {
								this.noDugsrList = []
							}
							for (let key in res.data.data) {
								this.drugHistoryList.push({
									time: key,
									child: res.data.data[key]
								})
							}
						}
					}
				})
			},
			// 服药计划
			getDrugLists() {
				this.$api.sendRequest({
					url: '/api/drug/lists',
					data: {},
					success: res => {
						if (res.code >= 0) {
							this.drugLists = res.data.data
							this.drugLists.map(item => {
								item.show = false
							}) 
							if (res.data.data.length) {
								this.noDugsrList = []
							} else {
								this.noDugsrList[1] = true
							}
						}
					}
				})
			},
			// 添加服药提醒
			addDrug() {
				this.$api.sendRequest({
					url: '/api/drug/add',
					data: {
						drug_name,
						drug_num,
						drug_unit,
						drug_time: [],
						cycle_type,
						start_time,
						until_date,
						cycle_time,
					},
					scuress: res => {
						console.log(res)
					}
				})
			},
			// 添加服药计划
			goToAddMdication() {
				uni.navigateTo({
					url: 'addMdication/index'
				})
			},
			// 删除
			deleteDrug(item) { 
				this.$api.sendRequest({
					url: '/api/drug/delete',
					data:{
						id: item.id
					},
					success: res => { 
						if(res.code >= 0){
							uni.showToast({
								title: '删除成功',
								icon: 'none',
								duration: 1000
							})
							this.getDrugLists()
						}
					}
				})
			},
			open(index) {  
				this.drugLists[index].show = true; 
				this.drugLists.map((val, idx) => { 
					if (index != idx){
						this.drugLists[idx].show = false;
						this.$forceUpdate()
					}
				})
			}
		},
		// computed:{
		// 	drugNameOneStr(){
		// 		return item.drug.drug_name
		// 	}
		// }
		filters: {
			unitType(num) {
				if (num == 1) {
					return '片'
				} else if (num == 2) {
					return '粒'
				} else if (num == 3) {
					return '喷'
				} else if (num == 4) {
					return '个'
				} else if (num == 5) {
					return '袋'
				} else {
					return '毫升'
				}
			},
			drugNameOneStr(str) {
				return str.substr(0, 1)
			}
		}
	}
</script>

<style lang="less">
	.mdication {
		.mdication_nav {
			display: flex;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #efefef;

			.mdication_item {
				flex: 1;
				text-align: center;
			}
		}

		.current_nav {
			color: #04c99b;
			border-bottom: 4rpx solid #04c99b;
		}

		.mdication_list {
			height: calc(100vh - 100rpx);

			.mdication_item {
				margin-bottom: 20rpx;
				padding: 20rpx;
				// height: 300rpx;
				background-color: #fff;

				.item_top {
					& text:last-child {
						margin-left: 20rpx;
						color: #04c99b;
					}
				}

				.item_con {
					margin: 20rpx 0;
					display: flex;
					height: 120rpx;
					line-height: 120rpx;

					image {
						width: 100rpx;
						height: 100rpx;
					}

					.con_noimg {
						width: 100rpx;
						text-align: center;
						height: 100rpx;
						line-height: 100rpx;
						background-color: #eee;
					}

					.con_one {
						margin-left: 20rpx;
						width: 490rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.item_foo {
					display: flex;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;

					text {
						flex: 1;
					}

					.current_item_foo {
						color: #fff;
						background-color: #04c99b;
					}
				}
			}

			.drug_history {
				padding: 10rpx;

				.his_time {
					font-size: 24rpx;
					height: 60rpx;
					line-height: 60rpx;
				}

				.history_item {
					padding: 30rpx 20rpx;
					display: flex;
					background-color: #fff;
					height: 160rpx;

					.his_fl {
						width: 100rpx;
						color: #01cb9b;
						border-right: 2rpx solid #01cb9b;
					}

					.his_fl_con {
						flex: 1;
						display: flex;

						.his_con_img,
						.his_fl_nodata {
							margin: 0 20rpx;
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							background-color: #eee;
						}

						.his_fl_nodata {
							line-height: 100rpx;
							text-align: center;
						}
					}

					.his_fr {
						width: 100rpx;
						line-height: 180rpx;
						font-size: 24rpx;
					}
				}
			}

			.drug_lists {
				display: flex;
				padding: 30rpx 20rpx;
				// height: 160rpx;
				background-color: #fff;

				.drug_fl,
				.drug_fl_nodata {
					margin: 10rpx 20rpx 10rpx 0;
					width: 140rpx;
					height: 120rpx;
					background-color: #eee;
					border: 1rpx solid #999;
				}

				.drug_fl_nodata {
					line-height: 120rpx;
					text-align: center;
				}

				.drug_con {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 24rpx;

					& text:last-child {
						color: #999;
					}
				}

				.drug_fr {
					height: 100rpx;
				}
			}
		}

		.no_drugs {
			position: absolute;
			top: 30%;
			left: 50%;
			height: 220rpx;
			text-align: center;
			transform: translate(-50%, -50%);

			.no_drugs_img {
				margin: 0 auto 20rpx auto;
				display: block;
				width: 180rpx;
				height: 180rpx;
			}
		}
	} 
	.u-btn-text{
		color: #fff;
		letter-spacing: 6rpx;
	}
</style>
